<style>
    .fsh-rightPanel{
        padding: 20px;
        box-sizing: border-box;
    }
    .layui-row {
        height: 50%;
        box-sizing: border-box;
    }
    .wxmp-card-wrap > div{
        margin-bottom: 0;
    }
    .layui-col-md6,.layui-col-md4,.layui-col-md8 {
        height: 100%;
        padding: 20px;
        box-sizing: border-box;
    }

    .chart_root {
        height: 100%;
        border: 1px solid #c9c9c9;
        border-radius: 8px;
        padding: 10px;
        box-sizing: border-box;
    }

    #bar-school {

    }

    #bar-res {

    }
    #list-msg{
    margin-top: 15px;

    }
    #list-msg li{
        line-height: 50px;
        height: 50px;
        margin: 0 30px;
        border-bottom: 1px solid #c9c9c9;
    }
    #list-msg .datetime{
        float: right;
        font-size: 13px;
    }
    #list-msg i{
        padding-right: 10px;
    }
</style>
<div class="fsh-rightPanel">
    <div class="layui-row wxmp-card-wrap">
        <div class="layui-col-md6">
            <div id="bar-school" class="chart_root">

            </div>
        </div>
        <div class="layui-col-md6">
            <div id="bar-res" class="chart_root">

            </div>
        </div>
    </div>

    <div class="layui-row wxmp-card-wrap">
        <div class="layui-col-md4">
            <div id="use-res" class="chart_root"></div>
        </div>
        <div class="layui-col-md8">
            <div id="new-msg" class="chart_root">
                <div style="font-size: 17px;font-weight: bold">最新消息</div>
                <ul id="list-msg">
                    <li><i class="iconfont icon-icon_notice"></i>山西大学加入协同教学平台<span class="datetime">2019-11-04</span></li>
                    <li><i class="iconfont icon-icon_notice"></i>山西大学加入协同教学平台<span class="datetime">2019-11-04</span></li>
                    <li><i class="iconfont icon-icon_notice"></i>山西大学加入协同教学平台<span class="datetime">2019-11-04</span></li>
                    <li><i class="iconfont icon-icon_notice"></i>山西大学加入协同教学平台<span class="datetime">2019-11-04</span></li>
                    <li><i class="iconfont icon-icon_notice"></i>山西大学加入协同教学平台<span class="datetime">2019-11-04</span></li>
                    <li><i class="iconfont icon-icon_notice"></i>山西大学加入协同教学平台<span class="datetime">2019-11-04</span></li>
                </ul>
            </div>
        </div>
    </div>
</div>
<script>
    layui.use(["laydate", 'layer', "table"], function () {
        var laydate = layui.laydate;
        var layer = layui.layer;
        var table = layui.table;
        var element = layui.element;


    });

    createSchoolBar();
    createResBar();
    createUseRes();
    //初始化学校活跃人数柱状图
    function createSchoolBar() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('bar-school'));


        // 指定图表的配置项和数据
        var option = {
            title: {
                text: '高校在线统计'
            },
            tooltip: {},
            xAxis: {
                data: ["山西大学", "山西大学", "山西大学", "山西大学", "山西大学", "山西大学"]
            },
            yAxis: {},
            series: [{
                name: '在线人数',
                type: 'bar',
                color: ['#eedd78'],
                data: [100, 200, 300, 100, 200, 300]
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    }

    //初始化资源柱状图
    function createResBar() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('bar-res'));


        // 指定图表的配置项和数据
        var option = {
            title: {
                text: '资源统计'
            },
            tooltip: {},
            xAxis: {
                data: ["动画", "动画", "动画", "动画", "动画", "动画"]
            },
            yAxis: {},
            series: [{
                name: '在线人数',
                type: 'bar',
                color: ['#C397E8'],
                data: [100, 200, 600, 100, 200, 300]
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    }

    //资源使用率
    function createUseRes() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('use-res'));


        // 指定图表的配置项和数据
        var option = {
            title : {
                text: '资源使用率',
            },
            tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            series : [
                {
                    name: '访问来源',
                    type: 'pie',
                    radius : '55%',
                    center: ['50%', '60%'],
                    data:[
                        {value:335, name:'直接访问'},
                        {value:310, name:'邮件营销'},
                        {value:234, name:'联盟广告'},
                        {value:135, name:'视频广告'},
                        {value:1548, name:'搜索引擎'}
                    ],
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    }
</script>

